<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
     <title>
            添加商品
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.min.css"  />
 	<link href="${pageContext.request.contextPath}/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
</head>
<script src="${pageContext.request.contextPath}/js/jquery-1.6.3.js"></script>
 <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
 <script src="${pageContext.request.contextPath}/js/addcommodity.js"></script>
<script type="text/javascript">

</script>
  <body style="width: 100%;height: 100%">
    	<div><h3 style="margin-left:45%;font-weight: 800 ">添加商品</h3>
			<span style="margin:20px 0 0 32%;color:red">注:以下项目均为必填项,在填写完商品基本信息后.可继续编辑商品的展示页面</span>
    	</div>
    	<div style="margin-left:3%;margin-top: 20px">
			<form id="commodityform" action="${pageContext.request.contextPath}/commodity/addCommodity.action" method="post">
				<span style="margin-top: 20px">展示名称</span>
				<input type="text" class="input" name="title" id="title">*<br>
				<span>类别</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<select name="categoryid" style="margin-bottom:20px;border:2px solid #C1C1C1;color:#FF0000  ">
			<option selected="selected" value="冰箱">冰箱</option>
			<option value="洗衣机">洗衣机</option>
			<option value="空调">空调</option>
			<option value="厨房用品">厨房用品</option>
			<option value="电视机">电视机</option>
			<option value="家庭影音">家庭影音</option>
			</select>*<br>
				<span>价格</span>
				<span class=" fa fa-yen" ></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input type="text" class="mininput" name="price" id="price">*<br>
				<span>品牌</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<select name="brand" id="brand"style="margin-bottom:20px;border:2px solid #C1C1C1;color:#FF0000  ">
						<option selected="selected" value="格力">格力</option>
						<option value="美的">美的</option>
						<option value="西门子">西门子</option>
						<option value="长虹">长虹</option>
						<option value="海尔">海尔</option>
						<option value="创维">创维</option>
						<option value="飞利浦">飞利浦</option>
						<option value="康佳">康佳</option>
						<option value="松下">松下</option>
						<option value="其他">其他</option>
					</select><br>
				<span>详细参数</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<textarea name="parameter" id="parameter" cols="70" rows="5" style="resize : none;
					margin-bottom:20px;border:2px solid #C1C1C1;"></textarea>
				<br>
				<span>库存</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<input id="stock" type="text" class="mininput" name="stock"><span>件</span>*<br>
				<div style="position:relative;z-index: 998;left:750px;top:-350px">
				<img src="img/notimg.png" id="notimg" style="width:222px;height:222px;float:left;border:1px solid #A8A8A8;"/>
				<span class="file" style="color:#fff;">
					上传标题缩略图
					<input type="file" id="upload" >
				</span>
				</div>
	    		<input type="hidden"  id="formImg1" name="img1">
	    		<input type="hidden"  id="formImg2" name="img2">
	    		<input type="hidden"  id="formImg3" name="img3">
	    		<input type="hidden"  id="formImg4" name="img4">
				<input type="hidden" id="newimg" name="titleimg">	
				<input type="submit" value="确定添加商品" class="btn btn-info" id="submits">
			</form>
			<button id="uploadImgs" style="color:#fff;">上传滚动展示图</button>
			<div id="addImg">
				<div
					style="width:500px;height:200px;
			border:1px solid;background: #fff;margin-left:210px;
			background: #FFFAFA;">
					<button class="close" id="closImg" style="margin-left:93%">&times;</button>
					<div class="defaultImgDiv">
						<img id="img0" src="${pageContext.request.contextPath}/img/imgDefault.png" class="defaultImg"
							style="margin-left:20px">
						<button style="left: 75px;" class="close" id="closImg0">&times;</button>
					</div>
					<div class="defaultImgDiv">
						<img id="img1" src="${pageContext.request.contextPath}/img/imgDefault.png" class="defaultImg">
						<button class="close" id="closImg1">&times;</button>
					</div>
					<div class="defaultImgDiv">
						<img id="img2" src="${pageContext.request.contextPath}/img/imgDefault.png" class="defaultImg">
						<button class="close" id="closImg2">&times;</button>
					</div>
					<div class="defaultImgDiv">
						<img id="img3" src="${pageContext.request.contextPath}/img/imgDefault.png" class="defaultImg">
						<button class="close" id="closImg3">&times;</button>
					</div>
					<br>
					<span id="files"> 添加图片 <input type="file" multiple
						id="uploads" />
					</span> <span id="imgspan"
						style="color:#9E9E9E;margin-left: 53%;display: block;margin-top:3%">请添加等比例,高分辨率的高清图</span>
					<button id="submitImg"
						style="margin-left: 80%;height:20%;display:none;border: 1px solid #43CD80;">确认添加</button>
				</div>
				</div>
				<button id="addClass" style="color:#fff;">添加颜色或分类</button>
				<div id="addClassDiv">
					<span style="margin-left:20px;color:red">官方标配自动根据商品生成,无需手动添加</span>
					<form id="fclass1">
					<input type="hidden" name="name" value="官方标配">
					<input type="hidden" name="price" value="" id="hprice">
					<input type="hidden" name="stock" value="" id="hstock">
					<input type="hidden" name="commid" class="commid">
					</form>
					<form id="fclass2">
					<span>分类名称</span>
					<input type="text" name="name">
					<span>价格</span>
					<input type="text" name="price">
					<span>库存</span>
					<input type="text" name="stock">
					<input type="hidden" name="commid" class="commid">
					</form>
					<form id="fclass3">
					<span>分类名称</span>
					<input type="text" name="name">
					<span>价格</span>
					<input type="text" name="price">
					<span>库存</span>
					<input type="text" name="stock">
					<input type="hidden" name="commid" class="commid">
					</form>
					<button id="addform">添加一栏
					<span class="fa fa-plus-circle"></span>
					</button>
					<button id="yesClass" style="margin-left:400px;">确定</button>
					<button id="notClass">取消</button>
				</div>
			<div id="line"></div>
				<span id="error" style="color:red"></span>
    	</div>
    	<input type="hidden" value="${pageContext.request.contextPath}/" id='path'>
   </body>
   <style>
   #addClassDiv{
   width:650px;height:420px;border:1px solid #A8A8A8;position: fixed;
   padding:20px 0 0 10px;background:#fff;display:none;left:280px;top:100px;
   z-index: 999
   }
   #addClass{
  background: #FF1493;border:1px solid #FF0000;height: 28px;
position: absolute;left: 850px;top:459px;border-radius:6px;
   }
     #addClass:hover{
  background: #FF83FA;
   }
 .close{
 
 }
 #uploadImgs{
background: #FF0000;border:1px solid #FF0000;height: 28px;
position: absolute;left: 850px;top:420px;border-radius:6px;
 }
  #uploadImgs:hover{
background: #FF7F00;
 }
   
#files {
	margin-left: 80%;
	position: relative;
	display: inline-block;
	background: #fff;
	border: 1px solid #43CD80;
	border-radius: 4px;
	padding: 4px 12px;
	overflow: hidden;
	color: #000;
	text-decoration: none;
	text-indent: 0;
	line-height: 20px;
}

#files input {
	position: absolute;
	font-size: 100px;
	right: 0;
	top: 0;
	opacity: 0;
}

#files:hover {
	background: #FFF5EE;
	color: #000;
	text-decoration: none;
}
.defaultImg {
	height: 70px;
	width: 70px;
	border: 1px solid;
	margin-left: 5px;
}
   .defaultImgDiv button {
	position: absolute;
	z-index: 99;
	top: 0px;
	left: 60px;
	border: none;
	color: red;
	display: none;
}

.defaultImgDiv {
	position: relative;float:left;
}
   #addImg {
	display: none;
	position: fixed;
	z-index: 999;
	top: 200px;
	left: 120px;
}
   #error{
   position:absolute;left:500px;
   top:450px;
   }
   #line{
   width: 100%;border-bottom: 1px solid #C1C1C1;position:absolute;left:0px;
   top:500px;
   }
   #submits{
   	width: 400px;height: 50px;font-size: 20px;position:absolute;top:500px;
   	left:400px;
   }
   form span{
   	color: #FFA500;font-size: 16px;
   }
   input{
   	margin-bottom: 20px;border:1px solid #C1C1C1;
   }
   .input{
   	width: 300px;
   }
   .mininput{
	width: 60px;
   }
	.file {
		margin-top:5%;
		font-size: 13px;
		font-weight: 400;
    position: relative;
    display: inline-block;
    background: #FFA500;
    border: 1px solid #FF6347;
    border-radius: 4px;
    padding: 4px 12px;
    overflow: hidden;
    color: #000;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    left:-160px;
    top:180px;
}
.file input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
}
.file:hover {
    background: #FF4500;
    border-color: #FF3030;
    color: #000;
    text-decoration: none;
}
/* 下面是改变选择框箭头样式的代码 */
select {
  border: solid 1px #000;

  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


  padding-right: 14px;
}


select::-ms-expand { display: none; }
   </style>
</html>